// Planks
//
// Planks are long, thin item representations. Usually they have a short title, perhaps an icon,
// perhaps a badge and usually a dropdown. Find them in the category and tag settings pages in the dashboard.
//
// Styleguide 17

// Plank
//
// Markup:
// <div class="plank">
//   <div class="plank-icon">
//     <button class="btn btn-icon">
//       <svg class="icon icon-svg icon-svg-handle" viewBox="0 0 17 17">
//         <use xlink:href="#handle" />
//       </svg>
//     </button>
//   </div>
//   <div class="plank-title">
//     One Plank
//     <span class="badge badge-outline">42</span>
//   </div>
//   <div class="plank-options">
//     <!- dropdown start ->
//     <div class="dropdown">
//       <button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn" data-toggle="dropdown">
//         <svg class="icon icon-svg-discussions" viewbox="0 0 17 17">
//           <use xlink:href="#discussions" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
//         </svg>
//       </button>
//       <div class="dropdown-menu dropdown-menu-right" role="menu">
//         <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Edit</a>
//         <div class="dropdown-divider"></div>
//         <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Delete</a>
//       </div>
//     </div>
//     <!- dropdown end ->
//   </div>
// </div>
// <div class="plank">
//   <div class="plank-icon">
//     <button class="btn btn-icon">
//       <svg class="icon icon-svg icon-svg-handle" viewBox="0 0 17 17">
//         <use xlink:href="#handle" />
//       </svg>
//     </button>
//   </div>
//   <div class="plank-title">
//     Two Plank
//     <span class="badge badge-outline">42</span>
//   </div>
//   <div class="plank-options">
//     <!- dropdown start ->
//     <div class="dropdown">
//       <button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn" data-toggle="dropdown">
//         <svg class="icon icon-svg-discussions" viewbox="0 0 17 17">
//           <use xlink:href="#discussions" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
//         </svg>
//       </button>
//       <div class="dropdown-menu dropdown-menu-right" role="menu">
//         <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Edit</a>
//         <div class="dropdown-divider"></div>
//         <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Delete</a>
//       </div>
//     </div>
//     <!- dropdown end ->
//   </div>
// </div>
//
// Styleguide 17.1

.plank {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    min-height: $control-height;
    background-color: $grey-lightest;
    border: $border-width solid $border-color;
    border-radius: 2px;

    &.plank-highlight {
        background-color: #f4fafe;
    }

    svg {
        height: 16px;
        vertical-align: middle;
    }

    .plank-star svg {
        height: 20px;
        width: 20px;
        margin-right: -4px; // Cheat it into the margin of a dropdown to the right.
    }

    .badge {
    }
}

.plank-title {
    padding: 0 $spacer * 0.5;
}

.plank-options {
    color: $grey;
    margin-left: auto;
    margin-top: -$border-width;
    margin-bottom: -$border-width;
    display: flex;
    align-items: center;

    .dropdown-toggle {
        padding: 6px 10px;
        line-height: 22px;
    }
}

.plank-icon {
    color: $grey;

    &:hover {
        fill: transparentize($body-color, 0.4);
    }
}

// Plank Grid
//
// To put planks into a grid, you need to wrap each plank item in a wrapper div.
//
// Markup:
// <div class="plank-container-grid">
//   <div class="plank-wrapper">
//     <div class="plank">
//       <div class="plank-title">
//         One Plank
//         <span class="badge badge-outline">42</span>
//       </div>
//       <div class="plank-options">
//         <!- dropdown start ->
//         <div class="dropdown">
//           <button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn" data-toggle="dropdown">
//           </button>
//           <div class="dropdown-menu dropdown-menu-right" role="menu">
//             <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Edit</a>
//             <div class="dropdown-divider"></div>
//             <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Delete</a>
//           </div>
//         </div>
//         <!- dropdown end ->
//       </div>
//     </div>
//   </div>
//   <div class="plank-wrapper">
//     <div class="plank">
//       <div class="plank-title">
//         Two Plank
//         <span class="badge badge-outline">42</span>
//       </div>
//       <div class="plank-options">
//         <!- dropdown start ->
//         <div class="dropdown">
//           <button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn" data-toggle="dropdown">
//           </button>
//           <div class="dropdown-menu dropdown-menu-right" role="menu">
//             <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Edit</a>
//             <div class="dropdown-divider"></div>
//             <a class="dropdown-item" href="#" role="menuitem" tabindex="-1">Delete</a>
//           </div>
//         </div>
//         <!- dropdown end ->
//       </div>
//     </div>
//   </div>
// </div>
//
// Styleguide 17.2

.plank-container-grid {
    @extend .row;
    padding: $spacer $spacer - 3px;

    .plank-wrapper {
        @include grid-item-large();
        padding-left: 3px;
        padding-right: 3px;
    }
}
